<template>
  <RTHeader :label="label" :statusInfo="statusInfo"></RTHeader>
  <component v-if="statusInfo.component" :is="statusInfo.component" @surrender="surrender" @dieOut="dieOut"></component>
</template>

<script setup lang='ts'>
import { ref, watch } from "vue";
import RTHeader from '../../RTHeader.vue';
import EntryWatting from "./EntryComponent/EntryWatting.vue";
import EntrySurrender from "./EntryComponent/EntrySurrender.vue";
import EntryInternship from "./EntryComponent/EntryInternship.vue";
import EntryOnTrial from "./EntryComponent/EntryOnTrial.vue";
import EntryRegular from "./EntryComponent/EntryRegular.vue";
const props = defineProps(['trainStatus']);
const statusInfo = ref<any>({
})



const label = ref<string>("")
const trainStatus = {
  "待入职": {
    component: EntryWatting,
  },
  "待入职-放弃": {
    component: EntrySurrender,
  },
  "实习中": {
    component: EntryInternship
  },
  "实习中-放弃": {
  },
  "实习中-淘汰": {

  },
  "试用中": {
    component: EntryOnTrial
  },
  "试用中-放弃": {

  },

  "试用中-淘汰": {

  },
  "已转正": {
    component: EntryRegular
  },
}


for (const key in trainStatus) {
  const el = trainStatus[key];
  el.status = key
  el.hr = "王xx" + key
  el.count = 1
}
watch(() => props.trainStatus, (val) => {
  statusInfo.value = trainStatus[val];
}, { immediate: true })

watch(() => props.trainStatus, (val) => {
  let title = ""
  if (val == '待入职' || val == '待入职-放弃') {
    title = '待入职'
    label.value = '入职环节'
  } else if (val == '实习中' || val == '实习中-放弃' || val == '实习中-淘汰') {
    label.value = '实习环节'
    title = '实习'
  } else {
    label.value = "试用环节"
    title = '试用'
  }
  label.value = title + "环节"

}, { immediate: true })
const emits = defineEmits(['surrender', 'dieOut'])
const surrender = (val) => {
  emits('surrender', val)
}
const dieOut = (val) => {
  emits('dieOut', val)
}
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
</style>